<template>
    <div>
        <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>申请管理</el-breadcrumb-item>
        <el-breadcrumb-item>假期出入宿舍记录</el-breadcrumb-item>
         </el-breadcrumb>
      <el-card style="margin: 15px; min-height: calc(100vh - 111px)">
        <div>
          <!--    功能区-->
          <div style="margin: 10px 0">
            <!--    搜索区-->
            <div style="margin: 10px 0">
               
                <div> 
                    <el-input v-model.trim="search" clearable placeholder="请输入学生姓名" prefix-icon="el-icon-search"
                        style="width: 20%"/>
                    <el-button icon="el-icon-search" @click="load" style="background-color: #143371; color: aliceblue;">搜索</el-button>
                    <el-button icon="el-icon-refresh-left" style="margin-left: 5px;background-color: #143371; color: aliceblue;"  @click="reset">重置</el-button></div>
                        
                 </div>
          </div>
          <!--    表格-->
          <el-table v-loading="loading" :data="tableData"  max-height="1000" style="width: 100%">
            <el-table-column label="#" type="index"/>
            <el-table-column v-if = 'false' label="单号" prop="holiId"/>
            <el-table-column label="学生学号" prop="stuId"/>
            <el-table-column label="学生姓名" prop="stuName"/> 
            <el-table-column label="入校时间" prop="holiEnterDate" />
            <el-table-column label="出校时间" prop="holiOutDate" />
            <!--      操作栏-->
           
          </el-table>
          <!--分页-->
          <div style="margin: 10px 0">
            <el-pagination
                :currentPage="currentPage"
                :page-size="pageSize"
                :page-sizes="[10, 20]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </template>
<script>
import request from '@/utils/request'
export default {
    name: "HolidayInfo",
    data() {
        return {
            loading: true,
            search: null,
            ldid:null,
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tableData: [
                {
                    holiId:null,
                    stuId:null,
                    stuName:null,
                 
                    holiEnterDate:null,
                    holiOutDate:null,
                }
            ],
            editDisplay: {
                display: "block",
            },
            display: {
                display: "none",
            },
        };
    },
    created() {
        this.ldid = JSON.parse(window.localStorage.getItem('user')).ldId
        console.log(this.ldid)
        this.load();
        this.loading = true;
       
        setTimeout(() => {
            //设置延迟执行
            this.loading = false;
        }, 1000);
    },
    methods:{
        async load(){
         console.log(this.form)
          request.get("/holi/find",{
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    search:this.search,
                    ldId : this.ldid
                },
            }).then((res) => {
                console.log(res);
                this.tableData = res.data.records;
                this.total = res.data.total;
                this.loading = false;
            });
        },

        reset() {
            this.search=null
          
            request.get("/holi/find", {
                params: {
                    pageNum: 1,
                    pageSize: this.pageSize,
                    search:null,
                    ldId : this.ldid
                },
            }).then((res) => {
                console.log(res);
                this.tableData = res.data.records;
                this.total = res.data.total;
                this.loading = false;
            });
        },
        handleSizeChange(pageSize) {
            //改变每页个数
            this.pageSize = pageSize;
            this.load();
        },
        handleCurrentChange(pageNum) {
            //改变页码
            this.currentPage = pageNum;
            this.load();
        },

    }
    

}
</script>